<template>
  <div class="purchaseForm">
    <!-- <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="success" @click="checkBill" disabled>已审核</el-button>
        </el-form-item>
      </el-form>
    </el-col>-->
    <el-col :span="24" class="toolbar">
      <div class="apply-data">
        <!-- <div class="ad-item">
          <div class="tit">单据编号:</div>
          <div class="text">{{dataDetail.orderNum}}</div>
        </div>-->
        <!-- <div class="ad-item">
          <div class="tit">u8单号:</div>
          <div class="text">{{tableData.length>0?tableData[0].vordercode:''}}</div>
        </div>-->
        <div class="ad-item">
          <div class="tit">来源单据号:</div>
          <div class="text">{{dataDetail.orderNum}}</div>
        </div>
        <div class="ad-item">
          <div class="tit">日期:</div>
          <div class="text">{{dataDetail.createtime}}</div>
        </div>
      </div>
    </el-col>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="u8单号" prop="vordercode"></el-table-column>
      <el-table-column prop="productName" label="产品名称"></el-table-column>
      <el-table-column prop="file" label="附件"></el-table-column>
      <el-table-column prop="invspec" label="规格型号"></el-table-column>
      <el-table-column prop="shop" label="供应商"></el-table-column>
      <el-table-column prop="unitweight" label="质量标准"></el-table-column>
      <el-table-column label="历史" align="center">
        <el-table-column prop="historical" label="采购量"></el-table-column>
        <el-table-column prop="histMaxMoney" label="最高价"></el-table-column>
        <el-table-column prop="histMinMoney" label="最低价"></el-table-column>
        <el-table-column prop="histAvgMoney" label="平均价"></el-table-column>
        <el-table-column prop="contractPrice" label="合同价"></el-table-column>
        <el-table-column prop="freightHis" label="是否含运费"></el-table-column>
        <el-table-column prop="payWayOld" label="付款方式"></el-table-column>
        <el-table-column prop="lastBuyer" label="上期采购员"></el-table-column>
        <el-table-column prop label="历史评价"></el-table-column>
      </el-table-column>
      <el-table-column prop="requisitionsNowHave" label="现有库存量"></el-table-column>
      <el-table-column prop="appraise" label="库存保质期"></el-table-column>
      <el-table-column label="询价单地址及联系方式">
        <template slot-scope="scope">
          <div>{{scope.row.wlcSysInquiryLast.inquiryAddressPhone}}</div>
        </template>
      </el-table-column>
      <el-table-column label="询价单单价">
        <template slot-scope="scope">
          <div>{{scope.row.wlcSysInquiryLast.inquiryUnitPrice}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="measurement" label="单位"></el-table-column>
      <el-table-column label="数量" align="center" prop="requisitionsHowMany"></el-table-column>
      <el-table-column label="询价单税率">
        <template slot-scope="scope">
          <div>{{scope.row.wlcSysInquiryLast.requisitionsTaxRate}}</div>
        </template>
      </el-table-column>
      <el-table-column label="询价单总价">
        <template slot-scope="scope">
          <div>{{scope.row.wlcSysInquiryLast.inquiryAllMoneys}}</div>
        </template>
      </el-table-column>
      <el-table-column label="询价单供应商名">
        <template slot-scope="scope">
          <div>{{scope.row.wlcSysInquiryLast.inquiryCustname}}</div>
        </template>
      </el-table-column>
      <el-table-column label="询价单是否含有运费">
        <template slot-scope="scope">
          <div>{{scope.row.wlcSysInquiryLast.inquiryIsFreight == 'Y'?'是':'否'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="询价单付款方式">
        <template slot-scope="scope">
          <div>{{scope.row.wlcSysInquiryLast.inquiryPayType}}</div>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <div>{{scope.row.wlcSysInquiryLast.inquiryRemark}}</div>
        </template>
      </el-table-column>
      <!-- 请购单数据 -->
      <el-table-column label="请购单数据" align="center" :label-class-name="'labelFont'">
        <el-table-column prop="file" label="附件" width="140" align="center">
          <template slot-scope="scope">
            <div>
              <el-button @click="showImg(scope.row.productUrl)" size="small" type="primary">查看</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供应商" prop="supplierName"></el-table-column>
        <el-table-column label="单价(元)" align="center" prop="requisitionsUnitPrice"></el-table-column>
        <el-table-column prop="measurement" label="单位"></el-table-column>
        <el-table-column label="本期申请数量" align="center" prop="requisitionsHowMany"></el-table-column>
        <el-table-column label="税率(元)" align="center" prop="requisitionsTaxRate"></el-table-column>
        <el-table-column label="总价" align="center" prop="inquiryAllMoneys"></el-table-column>
        <el-table-column label="是否含运费" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.requisitionsIsFreight == 'Y'?"是":"否"}}</div>
          </template>
        </el-table-column>
        <el-table-column label="付款方式" align="center" prop="requisitionsPayType"></el-table-column>
        <el-table-column label="地址及联系方式" align="center" prop="requisitionsAddressPhone"></el-table-column>
        <el-table-column label="用途" align="center" prop="requisitionsHowUse"></el-table-column>
        
        <el-table-column label="备注" align="center" prop="requisitionsRemark"></el-table-column>
      </el-table-column>
    </el-table>
    <!-- <div class="pagin">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="this.page.pageSize"
        :total="total"
        @current-change="changePage"
      ></el-pagination>
    </div>-->
    <el-col :span="24" class="toolbar">
      <div class="sign-remarks">
        <div class="tit">备注: {{dataDetail.remark}}</div>
      </div>
    </el-col>
    <el-col :span="24" class="toolbar">
      <div class="sign-data">
        <div class="sd-item">制单人:{{dataDetail.singlePerson}}</div>
        <div class="sd-item">审核人:{{dataDetail.auditor}}</div>
        <div class="sd-item">审核时间:{{formatTime(dataDetail.auditTime)}}</div>
        <div class="sd-item">变更人:{{dataDetail.modifiername}}</div>
        <div class="sd-item">变更日期:{{formatTime(dataDetail.modifytime)}}</div>
      </div>
    </el-col>
    <el-dialog title="批注" :visible.sync="dialogTableVisible" @close="closePizhu">
      <el-form :model="form">
        <el-form-item label>
          <el-input type="textarea" resize="none" v-model="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="pizhu()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 审核是否通过 -->
    <el-dialog title="该申请单是否通过" :visible.sync="dialogVisible" width="30%">
      <!-- <span>该申请单是否通过</span> -->
      <el-input v-model="Fillinput" placeholder="请输入理由(拒绝必填)"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="decisionFill(2)">拒绝</el-button>
        <el-button type="primary" @click="decisionFill(1)">通过</el-button>
      </span>
    </el-dialog>
    <!-- 展示图片 -->
    <el-dialog title="附件" :visible.sync="dialogImgShow">
      <div class="showImgDiv">
        <img :src="showImgUrl" alt />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  wlcSysInquirySelectLast,
  wlcSysInquiryCheckLast,
  wlcSysInquiryCheckLastFalse,
  wlcSysInquiryLastdetail,
  wlcSysInquiryOkLastdetail,
  wlcSysInquiryUpdateAllOk
} from "../../api/api";
import moment from "moment";
export default {
  data() {
    return {
      tableData: [],
      dialogTableVisible: false, //是否显示弹窗
      form: {},
      page: {
        page: 1,
        pageSize: 1
      },
      total: 0,
      dataDetail: {},
      dialogVisible: false, //是否显示审核弹出
      textarea: "", //批注输入的文字
      textPlace: "", //点击了哪个批注
      Fillinput: "", //审核输入框内容
      writeData: {
        annotation1: "",
        annotation2: "",
        annotation3: "",
        annotation4: ""
      },
      showImgUrl:'',
      dialogImgShow: false //是否展示图片
    };
  },
  methods: {
    //展示图片
    showImg(url) {
      if(url){
        this.showImgUrl = url;
        this.dialogImgShow = true;
      }else{
        this.$message({
          message: '暂无图片',
          type: 'warning'
        });
      }
    },
    //格式化时间
    formatTime(time) {
      if (time) {
        return moment(time).format("YYYY-MM-DD");
      } else {
        return "";
      }
    },
    //审核通过或失败
    decisionFill(state) {
      let obj = {
        allId: this.dataDetail.id,
        reason: this.Fillinput
      };
      if (state == 1) {
        wlcSysInquiryCheckLast(obj).then(res => {
          this.$message.success("审核通过");
          this.getList();
          this.dialogVisible = false;
          this.Fillinput = "";
        });
      } else {
        if (this.Fillinput) {
          wlcSysInquiryCheckLastFalse(obj).then(res => {
            this.$message.success("拒绝成功");
            this.getList();
            this.dialogVisible = false;
            this.Fillinput = "";
          });
        } else {
          this.$message.warning("请输入理由");
        }
      }
    },
    //点击审核
    checkBill() {
      this.dialogVisible = true;
    },
    showNotes(n) {
      this.dialogTableVisible = true;
      this.textPlace = "annotation" + n;
      this.textarea = this.writeData[this.textPlace];
    },
    //改变页数
    changePage(e) {
      console.log(e);
      this.page.page = e;
      this.getList();
    },
    getList() {
      wlcSysInquirySelectLast({ page: this.page }).then(res => {
        this.total = res.total;
        this.dataDetail = res.records[0];
        this.tableData = this.dataDetail.wlcSysBack;
      });
    },
    closePizhu() {
      this.textarea = "";
    },
    //批注点击确定
    pizhu() {
      this.writeData[this.textPlace] = this.textarea;
      this.dialogTableVisible = false;
    },
    //获取详情
    getDetail(allId) {
      wlcSysInquiryOkLastdetail({ allId }).then(res => {
        this.dataDetail = res;
        this.tableData = res.wlcSysBack;
        if (res.type != 9) {
          this.updateAllOk(res.id);
        }
      });
    },
    //标记最终确认单为已处理状态
    updateAllOk(allId) {
      wlcSysInquiryUpdateAllOk({ allId }).then(res => {
        console.log(res);
      });
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getDetail(this.$route.query.id);
    }
  }
};
</script>

<style lang="less" scoped>
.apply-data {
  display: flex;
  flex-wrap: wrap;
  .ad-item {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin-right: 70px;
    color: #666;
    font-size: 14px;
  }
}
.showImgDiv {
  width: 100%;
  img {
    width: 100%;
  }
}
.sign-remarks {
  width: 100%;
  border-bottom: 1px solid #999;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  color: #333;
}
.sign-data {
  display: flex;
  .sd-item {
    // margin-right: 15%;
    flex: 1;
    color: #333;
  }
}
.pagin {
  text-align: right;
  margin: 10px 0;
}
</style>
